<template>
  <div class="container">
    <div class="main">
      <!-- 整个登录盒子 -->
      <div class="loginbox">
        <!-- 左侧的登录盒子 -->
        <div class="loginbox-in">
          <div class="userbox">
            <i class="icon icon-user" style="margin-top: 5px"></i>
            <input
              class="user"
              id="user"
              maxlength="11"
              v-model="username"
              placeholder="用户名"
            />
          </div>
          <br />
          <div class="pwdbox">
            <i class="icon icon-lock" style="margin-top: 5px"></i>
            <input
              class="pwd"
              id="password"
              v-model="pwd"
              type="password"
              placeholder="密码"
            />
          </div>
          <br />

          <router-link to="/zhuce"> <p>你是学生？点击跳转</p></router-link>
          <br />

          <button
            type="primary"
            class="btn register_btn"
            @click="login()"
            style="font-size: 16px"
          >
            登录
          </button>
        </div>

        <!-- 右侧的注册盒子 -->
        <div class="backgroundes">
          <div class="con">来黑马培训班的你就是下一个黑马</div>
          <div class="title">Welcome to dark horse operating system</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import users_json from "../assets/json/users.json";
export default {
  name: "logines",

  data() {
    return {
      username: "",
      pwd: "",
      money: "",
      res: [],
      objes:{
            coursename:'',
            },
    };
  },
  created() {
    // this.res = users_json.userlist;
    // console.log(this.res);
  },
  mounted() {
    this.$axios
      .get("http://10.197.26.58:8001/getteacherlist")
      .then((response) => {
        this.res = response.data.slice(0, 10);
        console.log(this.res);
      });
  },
  components: {},
  methods: {
    // register() {
    //   if (this.username == null) {
    //     alert("用户名不能为空");
    //   }
    //   if (this.pwd == null) {
    //     alert("密码不能为空");
    //   }
    //   if (this.repwd == null) {
    //     alert("密码不能为空");
    //   } else if (this.repwd !== this.pwd) {
    //     alert("两次输入的密码不相同");
    //   }
    //   var new_user = {
    //     username: this.username,
    //     password: this.pwd,
    //   };
    //   this.$store.state.user.push(new_user);
    // },
    tiaojian(item) {
      return item.teacherName == this.username;
    },
    login() {
      var index = this.res.findIndex(this.tiaojian);
      if (index == -1) {5
        alert("该用户不存在，请重新输入！" );
      } else if (this.res[index].teacherPassword == this.pwd) {
        alert("登录成功！");
        // this.$router.push({ name: "user", params: { name:this.username,money:this.res[index].money} });
          //  this.$store.state.username=this.username;
   this.$router.push('coursedet')

            this.objes.coursename=this.username;
            this.$store.commit('addCartses',{name:this.objes.coursename, });
        //  this.$router.push({name:"cardcs",params:{tcname:this.username}});
      } else {
        alert("密码错误！");
      }
    },
  },
};
</script>
<style>
.login {
  padding-top: 50px;
}
.loginbox {
  display: flex;
  position: absolute;
  width: 800px;
  height: 400px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 #4e655d;
}
.loginbox-in {
  background-color: #89ab9e;
  width: 240px;
}
.userbox {
  margin-top: 120px;
  height: 30px;
  width: 230px;
  display: flex;
  margin-left: 25px;
}
.pwdbox {
  height: 30px;
  width: 225px;
  display: flex;
  margin-left: 25px;
}

.backgroundes {
  position: relative;
  width: 570px;
  background-image: url("../assets/img/img99.png");
  background-size: cover;
  font-family: sans-serif;
}
.title {
  margin-top: 320px;
  font-weight: bold;
  font-size: 20px;
  color: white;
  text-align: center;
}
.title:hover {
  font-size: 21px;
  transition: all 0.4s ease-in-out;
  cursor: pointer;
}
.con {
  position: absolute;
  top: 20%;
  -webkit-transform: translateY(-30%);
  transform: translateY(-70%);
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
   font-weight: 700;
   font-size: 35px;
   color: rgb(14, 7, 7);
}
.uesr-text {
  position: left;
}
input {
  outline-style: none;
  border: 0;
  border-bottom: 1px solid #e9e9e9;
  background-color: transparent;
  height: 20px;
  font-family: sans-serif;
  font-size: 15px;
  color: #445b53;
  font-weight: bold;
}
/* input::-webkit-input-placeholder{
    color:#E9E9E9;
 } */
input:focus {
  border-bottom: 2px solid #445b53;
  background-color: transparent;
  transition: all 0.2s ease-in;
  font-family: sans-serif;
  font-size: 15px;
  color: #445b53;
  font-weight: bold;
}
input:hover {
  border-bottom: 2px solid #445b53;
  background-color: transparent;
  transition: all 0.2s ease-in;
  font-family: sans-serif;
  font-size: 15px;
  color: #445b53;
  font-weight: bold;
}

input:-webkit-autofill {
  /* 修改默认背景框的颜色 */
  box-shadow: 0 0 0px 1000px #89ab9e inset !important;
  /* 修改默认字体的颜色 */
  -webkit-text-fill-color: #445b53;
}

input:-webkit-autofill::first-line {
  /* 修改默认字体的大小 */
  font-size: 15px;
  /* 修改默认字体的样式 */
  font-weight: bold;
}
.log-box {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  width: 190px;
  margin-left: 30px;
  color: #4e655d;
  margin-top: -5px;
  align-items: center;
}
.log-box-text {
  color: #4e655d;
  font-size: 12px;
  text-decoration: underline;
}
.login_btn {
  background-color: #5f8276; /* Green */
  border: none;
  color: #fafafa;
  padding: 5px 22px;
  text-align: center;
  text-decoration: none;
  font-size: 13px;
  border-radius: 20px;
  outline: none;
}
.login_btn:hover {
  box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24),
    0 17px 50px 0 rgba(0, 0, 0, 0.19);
  cursor: pointer;
  background-color: #0b5137;
  transition: all 0.2s ease-in;
}

.warn {
  margin-top: 60px;
  /* margin-right:120px; */
  margin-left: -120px;
  margin-bottom: 5px;
  font-weight: bold;
  font-size: 17px;
}

.register_btn {
  background-color: transparent; /* Green */
  border: none;
  text-decoration: none;
  font-size: 12px;
  /* border-radius: 20px;   */
  color: #4e655d;
  font-size: 12px;
  text-decoration: underline;
  display: flex;
  margin-left: 25px;
  outline: none;
}
.register_btn:hover {
  font-weight: bold;
  cursor: pointer;
}
</style>
